<template>
    <div class="carouselBox" :class="{'noImg':!maxHeight}"  draggable="false" :style='`padding-top:${options.paddingTop/2}px;padding-bottom:${options.paddingBottom/2}px; height:${maxHeight}px`'>
        <el-carousel :interval='time' :autoplay='time!=0' v-if='showAll' :class="{'circle':options.carouselType==1}"    arrow="never">
            <el-carousel-item v-for="(item,index) in options.imgList" :key="index">
                <img :src="item.imageUrl" alt="">
            </el-carousel-item>
        </el-carousel>
        <div class="box_shadow" v-if='!imgListLength'>
            <div class="react_box"></div>
            <p>请在右侧添加需要的图片</p>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            options:{
               
            },
            time:0,
            showAll:true,
            imgListLength:0,
            maxHeight:0
        }
    },
    props:{
        option:{
            type:Object
        }
    },
    watch:{
        option:function(val){
            this.showAll = false;
            this.maxHeight=0;
            if(val.imgList.length){
                val.imgList.map((vals,index)=>{
                    if(vals.naturalHeight>this.maxHeight){
                        this.maxHeight = vals.naturalHeight
                    }
                })
            }
            this.$nextTick(()=>{
                this.options =JSON.parse(JSON.stringify(val));
                this.imgListLength = this.options.imgList.length;
                this.time = val.time*1000 
                this.showAll = true; 
            })
        }
    },
    mounted(){
        this.showAll = false;
        this.maxHeight=0;
        if(this.option.imgList.length){
            this.option.imgList.map((vals,index)=>{
                if(vals.naturalHeight>this.maxHeight){
                    this.maxHeight = vals.naturalHeight
                }
            })
        }
        this.$nextTick(()=>{
            this.options =JSON.parse(JSON.stringify(this.option));
            this.imgListLength = this.options.imgList.length;
            this.time = this.options.time*1000 
            this.showAll = true; 
        })
    }
}
</script>
<style scoped lang='less'>
.noImg{
    min-height: 200px;
}
.carouselBox{
    width:100%;
    height:auto;
    position:relative; 
    // background:#F8F3F0;
    .box_shadow{
        position:absolute;
        width:100%;
        height:100%;
        z-index: 200;
        top:0;
        left:0;
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 14px;
        color:#918985;
        .react_box{
            width:70px;
            height:56px;
            background:url('~@/assets/img/editContent/pic-nor.png') center center  no-repeat;
            background-size:cover;
            // background-color:#FFE3D5;
            margin-bottom:19px;
        }
    }
}
.el-carousel{
    overflow: hidden;
    width:100%;
    height:100%;
    img{
        width:100%;
    }
}
.circle{
   /deep/.el-carousel__button{
        border-radius:20px;
    } 
}
/deep/.el-carousel__button{
    width: 8px;
    height:8px;
    background-color:#999999;
    opacity:0.3;
}
/deep/.el-carousel__container{
    height:100%;
}
/deep/.el-carousel__indicators--outside{
    bottom:0;
    position:absolute;
}
</style>